<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    ul {
      list-style: none;
    }

    #app {
      margin: 50px auto 0;
      width: 400px;
    }

    /*删除线的样式*/
    .line-through {
      text-decoration: line-through;
    }
  </style>
</head>
<body>

<div id="app">
  <h1>任务列表</h1>
  <div>
    任务总数：<span>{{tasks.length}}</span>；还有：<span>{{countUnCompleted}}</span> 未完成；
    <a href="javascript:void(0)" @click="removeCompletedTask">【完成】</a>
  </div>
  <ul>
    <li v-for="t in tasks">
      <input type="checkbox" v-model="t.completed">
      <span
          :class="{'line-through':t.completed}"
          v-if="!t.editable"
          @dblclick="t.editable = true"
      >
        {{t.name}}
      </span>
      <input type="text"
             v-model="t.name"
             @blur="t.editable=false"
             v-else>
    </li>
  </ul>
  <div>
    <input type="text" v-model="inputTask"> <input type="button" value="添加" @click="addTask">
  </div>
</div>


<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
  var vm = new Vue({
    el: '#app',
    data: {
      tasks: [],
      // 用于接收新添加的任务信息
      inputTask: ''
    },
    // 定义计算属性
    computed:{
      // 使用计算属性来处理：没有完成的任务的数量
      countUnCompleted: function () {
        console.log("countUnCompleted 方法被调用！")
        var count = 0;
        for (var i = 0; i < this.tasks.length; i++) {
          // 如果是没有完成的状态，count就加1
          if (!this.tasks[i].completed) {
            count++;
          }
        }
        // 返回没有完成的任务数量
        return count;
      }
    },
    methods: {
      // 计算没有完成的任务的数量
      // countUnCompleted: function () {
      //   console.log("countUnCompleted 方法被调用！")
      //   var count = 0;
      //   for (var i = 0; i < this.tasks.length; i++) {
      //     // 如果是没有完成的状态，count就加1
      //     if (!this.tasks[i].completed) {
      //       count++;
      //     }
      //   }
      //   // 返回没有完成的任务数量
      //   return count;
      // },
      // 删除已经完成的任务
      removeCompletedTask: function () {
        var temp = [];
        for (var i = 0; i < this.tasks.length; i++) {
          // 如果是没有完成的状态，就加入到临时的数组中
          if (!this.tasks[i].completed) {
            temp.push(this.tasks[i]);
          }
        }
        // 把没有完成的任务的数组保存到 tasks 中
        this.tasks = temp;
      },
      // 添加新任务的方法
      addTask: function () {
        var task = this.inputTask.trim();
        if (task == '') {
          return
        }
        // 添加到任务数组中，默认是未完成状态，是不可编辑的状态
        this.tasks.push(  {name: task, completed: false, editable: false});
      }
    },
    mounted:function () {
      var that = this;
      axios.get("data/tasks.json")
      .then(function (res) {
          that.tasks = res.data;
      })
    }
  });
</script>
</body>
</html>
